<template>
  <div class="gl_contentBox gl_heightFull">
    <el-tabs v-model="activeName" class="gl_tabs" @tab-click="handleTabClick">
      <template v-for="item in optList">
        <el-tab-pane :key="item.code" v-auth="['Training']" :name="item.code" :label="item.name" />
      </template>
    </el-tabs>
    <game-setting v-if="activeName === 'Game'" />
    <train-setting v-if="activeName === 'Train'" />
  </div>
</template>
<script>
import gameSetting from './gameSetting/index';
import trainSetting from './trainSetting/index';
import { mapState } from 'vuex';
import { getRoles } from '@/lib/auth';
export default {
  components: {
    gameSetting,
    trainSetting
  },
  data() {
    return {
      activeName: '',
      optList: []
    };
  },
  computed: {
    ...mapState({
      tenantId: state => state.user.tenantId
    })
  },
  created() {
    this.activeName = this.$route.query.settingType || 'Game';
    this.init();
  },
  methods: {
    init () {
      // const $route = this.$route;
      this.gameId = this.$route.params.id;
      const _optList = [
        {
          code: 'Game',
          name: '赛事机构权限配置',
          component: gameSetting
        },
        {
          code: 'Train',
          name: '培训机构权限配置',
          component: trainSetting,
          auth: ['Training']
        }
      ];
      const _showList = [];
      _optList.map(item => {
        let _hasAuth = false;
        if (item.auth) {
          const roles = getRoles();
          item.auth.map(jtem => {
            if (roles.includes(jtem)) {
              _hasAuth = true;
            }
          });
        } else {
          _hasAuth = true;
        }
        if (_hasAuth) {
          _showList.push(item);
        }
      });
      console.log(_showList);
      this.optList = _showList;
    },
    handleTabClick(tabItem) {
      const _tenantId = this.tenantId ? this.tenantId : '';
      this.$router.push({
        path: '/t__' + _tenantId + '/configuration/orgnazitionAuth',
        query: { settingType: tabItem.name }
      });
    }
  }
};
</script>
